<template>
    <view class="container">
        <!-- 权限检测通过后显示web-view -->
        <web-view v-if="hasCameraPermission" :src="query"></web-view>

        <!-- 权限提示页面 -->
        <view v-if="!hasCameraPermission" class="permission-guide">
            <view class="permission-content">
                <view class="permission-icon-wrapper">
                    <view class="permission-icon-bg">
                        <uni-icons type="videocam" size="60" color="#fff"></uni-icons>
                    </view>
                </view>
                <text class="permission-title">需要摄像头权限</text>
                <text class="permission-desc"
                    >为了给您提供更好的康复训练体验，请允许应用访问您的摄像头</text
                >
                <button class="permission-btn" @click="goToSettings">
                    <uni-icons type="gear" size="20" color="#fff"></uni-icons>
                    <text class="btn-text">开启摄像头权限</text>
                </button>
                <text class="permission-note">您可以在设置中随时更改权限</text>
            </view>
        </view>
    </view>
</template>

<script>
import useUserStore from '@/stores/modules/user';
import qs from 'qs';

export default {
    data() {
        return {
            query: 'https://trainh5.logs.fund/',
            hasCameraPermission: false
        };
    },
    onLoad() {
        const item = uni.getStorageSync('play_data');
        const user_store = useUserStore();
        const token = user_store.token;
        const data = { ...item, token: token };
        const query = qs.stringify(data);
        this.query += '?' + query;

        console.log('[TrainingWeb] 准备加载H5页面:', this.query);
    },
    onReady() {
        // 页面渲染完成后检查摄像头权限
        this.checkCameraPermission();
    },
    methods: {
        /**
         * 检查摄像头权限
         */
        checkCameraPermission() {
            // #ifndef H5
            uni.getSetting({
                success: res => {
                    const cameraAuth = res.authSetting['scope.camera'];

                    if (cameraAuth === true) {
                        // 已授权
                        console.log('[TrainingWeb] 摄像头权限已授权');
                        this.hasCameraPermission = true;
                    } else if (cameraAuth === false) {
                        // 已拒绝授权
                        console.log('[TrainingWeb] 摄像头权限已拒绝');
                        this.hasCameraPermission = false;
                    } else {
                        // 未授权，请求授权
                        console.log('[TrainingWeb] 首次请求摄像头权限');
                        this.requestCameraPermission();
                    }
                },
                fail: () => {
                    console.error('[TrainingWeb] 获取权限设置失败');
                    this.requestCameraPermission();
                }
            });
            // #endif

            // #ifdef H5
            // H5环境直接显示（不需要在这里检测权限）
            this.hasCameraPermission = true;
            // #endif
        },

        /**
         * 请求摄像头权限
         */
        requestCameraPermission() {
            // #ifndef H5
            uni.authorize({
                scope: 'scope.camera',
                success: () => {
                    console.log('[TrainingWeb] 摄像头权限授权成功');
                    this.hasCameraPermission = true;
                },
                fail: () => {
                    console.log('[TrainingWeb] 摄像头权限授权失败');
                    this.hasCameraPermission = false;
                }
            });
            // #endif
        },

        /**
         * 跳转到设置页面
         */
        goToSettings() {
            // #ifndef H5
            uni.openSetting({
                success: settingRes => {
                    if (settingRes.authSetting['scope.camera']) {
                        console.log('[TrainingWeb] 用户在设置中开启了摄像头权限');
                        this.hasCameraPermission = true;
                    } else {
                        console.log('[TrainingWeb] 用户未开启摄像头权限');
                        this.hasCameraPermission = false;
                    }
                },
                fail: () => {
                    console.error('[TrainingWeb] 打开设置页面失败');
                    this.hasCameraPermission = false;
                }
            });
            // #endif
        }
    }
};
</script>

<style lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.permission-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        transform: rotate(30deg);
    }

    .permission-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 2;
        width: 80%;
        max-width: 500rpx;
    }

    .permission-icon-wrapper {
        margin-bottom: 60rpx;
        animation: float 3s ease-in-out infinite;

        .permission-icon-bg {
            width: 120rpx;
            height: 120rpx;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 15rpx 35rpx rgba(16, 185, 129, 0.4);
        }
    }

    .permission-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 20rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }

    .permission-desc {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        margin-bottom: 60rpx;
        line-height: 1.6;
    }

    .permission-btn {
        width: 100%;
        height: 90rpx;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #fff;
        border: none;
        border-radius: 45rpx;
        font-size: 32rpx;
        font-weight: bold;
        box-shadow: 0 10rpx 25rpx rgba(245, 158, 11, 0.4);
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15rpx;
        margin-bottom: 30rpx;

        .btn-text {
            color: #fff;
            font-weight: bold;
        }

        &:active {
            transform: scale(0.95);
            box-shadow: 0 5rpx 15rpx rgba(245, 158, 11, 0.4);
        }
    }

    .permission-note {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.7);
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}
</style>
